<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽示例</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            border: 1px solid #000;
            cursor: move;
        }
        .dropzone {
            width: 200px;
            height: 200px;
            border: 2px dashed #000;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="draggable" draggable="true" id="drag1">拖拽我</div>
<div class="dropzone" id="dropzone1">放置到这里</div>
<script >
    var draggable = document.getElementById('drag1');
    var dropzone = document.getElementById('dropzone1');

    // 添加拖拽开始事件监听器
    draggable.addEventListener('dragstart', function(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
        console.log('拖拽开始');
    });

    // 添加拖拽进入和拖拽在目标区域上方事件监听器
    dropzone.addEventListener('dragover', function(event) {
        event.preventDefault(); // 阻止默认行为以允许放置
        console.log('拖拽在目标区域上方');
    });

    // 添加放置事件监听器
    dropzone.addEventListener('drop', function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData('text');
        var draggedElement = document.getElementById(data);
        dropzone.appendChild(draggedElement);
        console.log('元素已放置');
    });
</script>
</body>

</html>